import React, {useState, useEffect} from 'react';
import './vote.less';
import './voted.less';
import { Row, Col, Modal, Form, Input, Cascader } from 'antd';
import options from '../../json/Citys';
import axios from 'axios';
import {InfoCircleOutlined} from '@ant-design/icons';

const bgImg = 'http://img.iaquam.com/open/quiz_top-min.png';
const buttonImg = 'http://img.iaquam.com/open/btn_submit-min.png'

declare var window: any
// declare var TDAPP: any

const data = [
    {
        id: 1,
        img: 'http://img.iaquam.com/open/player1-min.png'
    },
    {
        id: 2,
        img: 'http://img.iaquam.com/open/player2-min-new.png'
    },
    {
        id: 3,
        img: 'http://img.iaquam.com/open/player3-min.png'
    },
    {
        id: 4,
        img: 'http://img.iaquam.com/open/player4-min.png'
    },
    {
        id: 5,
        img: 'http://img.iaquam.com/open/player5-min.png'
    },
    {
        id: 6,
        img: 'http://img.iaquam.com/open/player6-min.png'
    },
]

const Vote = (props: any) => {
    const [count, setCount] = useState(-1);
    const [visible, setVisible] = useState(false);
    const [subSta, setSubSta] = useState(true);

    const [form] = Form.useForm();

    // useEffect(() => {
    //     // console.log(`You clicked ${count} times`); 
    // },[count]);

    function isNumbers(e: any, value: any, callback: Function) {
        if(/^[0-9]+$/.test(value) && value.length  === 11) {
            callback()
        }else{
            callback('手机号不正确！');
        }
    }

    function checkedPeo() {
        if(count >= 1) {
            setVisible(true)
        }else{
            Modal.info({
                centered: true,
                icon: '',
                content: (
                  <div>
                    <p className='model-text'><InfoCircleOutlined style={{color: 'red'}} />请选择你的冠军球星</p>
                  </div>
                ),
                onOk() {},
              });
        }
    }

    function onOk() {
        setSubSta(false);
        form.validateFields().then(values => {
            let params = {...values};
            params.region = values.region.join('');
            params.player = count;
            axios({
                method: 'post',
                url: '/form.php',
                headers:{
                    'Content-type': 'application/x-www-form-urlencoded;charset=utf-8'
                },
                transformRequest: [function (data) {
                    let ret = ''
                    for (let it in data) {
                      ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                    }
                    return ret
                }],
                data: params
            }).then(function (response: any) {
                // eslint-disable-next-line
                if(response.data.code == 200) {
                    setSubSta(true);
                    setVisible(false);
                    props.history.push('/voted/' + count);
                }else{
                    Modal.info({
                        centered: true,
                        icon: '',
                        content: (
                          <div>
                            <p className='model-text'><InfoCircleOutlined style={{color: 'red'}} /> {response.data.msg}</p>
                          </div>
                        ),
                        onOk() {
                            setSubSta(true);
                        },
                      });
                }
            }).catch(function (error) {
                setSubSta(true);
                console.log(error);
            });
        }).catch(info => {
            setSubSta(true);
            console.log('Validate Failed:', info);
        });
    }

    useEffect(() => {
        // let MapKv: any = {
        //     page_name: '投票 - 穿越The Open 公开赛',
        // }
        // let scriptEle = document.createElement('script')
        // scriptEle.type = 'text/javascript'
        // scriptEle.src = "https://jic.talkingdata.com/app/h5/v1?appid=BE0B999FA8234987B29DE0F7B3AD8AF1&vn=LHR&vc=1.0.0";
        // document.head.appendChild(scriptEle)
        // scriptEle.onload = () => {
        //     window.TDAPP = TDAPP
        //     window.TDAPP.onEvent('投票', '活动主页-穿越The Open 公开赛', MapKv);
        // }
    },[])

    return (
        <div className='warp'>
            <div>
                <img src={bgImg} width='100%' alt=""/>
            </div>
            <div className='vote-box'>
                <Row className='vote-content'>
                    《穿越 The Open 公开赛》的冠军得主是由粉丝的参与度及球手以往参赛
                    数据结合计算出来的。你在抖音或微信视频号上的助威行动都会被采集，并
                    成为影响赛果的粉丝参与度数据。你越积极响应邀请更多的朋友来参与，你
                    点选的冠军迎面越大。
                </Row>
                <Row>
                    <div className='voted-height voted-titleHome'>助威秘诀</div>
                </Row>
                <Row className='vote-content'>
                    <div>1.将你收到的冠军照片在抖音或微信视频号上发布</div>
                    <div>2.发布时谨记要填写话题 <span className='voted-color'>“#TheOpen公开赛”</span></div>
                    <div>3.邀请至少2个朋友<span className='voted-color'>"@XXX @YYY"</span>参与竞猜游戏，然后发布</div>
                </Row>
                <div className='vote-title'>
                    在下列球星中点选一位你心目中的冠军，按“提交键”
                </div>
                <Row gutter={8} className='vote-checkbox'>
                    {
                        data.map((item, k) => {
                            return <Col span={8} onClick={() => setCount(item.id)} key={item.id}>
                                <div>
                                    <img src={item.img} width='100%' alt=""/>
                                </div>
                                <div className='vote-selectItems'>
                                    <span>
                                        <span className={count === item.id ? 'vote-active' : '' }></span>
                                    </span>
                                </div>
                            </Col>
                        })
                    }
                </Row>
                <div className='vote-beChecked'>
                    <img src={buttonImg} alt="" onClick={() => checkedPeo()} />
                </div>
                <div className='vote-text'>
                    <div className='vote-mess'>
                        <div>游戏活动规则</div>
                        <div>1.每位参与游戏者只可以选出一位球星作为冠军选项。</div>
                        <div>2.提交冠军选项后，系统会提示你填写“中奖收货信息”，该信息会被用来核对参与者的真实身份，方便一旦中奖后奖品的分发及相关联系。</div>
                        <div>3.该“中奖收货信息”的填写不代表参与者已中奖，一切中奖结果主办方会通过微信公众号公布及与获奖者联系。</div>
                        <div>4.奖品总数量为100件，参与者猜中《穿越 The Open 公开赛》的冠军得主，并且猜中者首100位才可获得奖品。具体奖品的配发由主办方全权决定。如遇中奖者信息不详错漏，或无法联系，该中奖者之奖品顺序给与排名下一位的猜中者。</div>
                        <div>5.主办方对该活动的一切细节保留所有更改权力。</div>
                    </div>
                </div>
                <Modal
                    visible = {visible}
                    title = {null}
                    centered
                    bodyStyle={{background: '#1a1c3c'}}
                    closable = {false}
                    onCancel = {() => setVisible(false)}
                    footer = {null}
                    >
                    <div className='vote-form-box'>
                        <div className='vote-form vote-form-title'>
                            请您填写以下个人信息
                        </div>
                        <div>
                        <Form
                            form={form}
                            layout="vertical"
                            name="form_in_modal"
                            initialValues={{ modifier: 'public' }}
                        >
                            <Form.Item
                                name="name"
                                label="姓名"
                                rules={[{ required: true, message: '请输入姓名！' }]}
                            >
                                <Input className='vote-input' />
                            </Form.Item>
                            <Form.Item
                                name="phone"
                                label="手机号码"
                                rules={[
                                    { required: true, message: '请输入正确手机号码！' },
                                    { validator: isNumbers}
                                ]}
                            >
                                <Input className='vote-input' />
                            </Form.Item>
                            <Form.Item
                                name="region"
                                label="收货地址"
                                rules={[{ required: true, message: '请选择城市！' }]}
                            >
                                <Cascader
                                    placeholder="所在地区"
                                    options={options}
                                    className='vote-input'
                                    // onChange={(e) => onChange(e)}
                                />
                            </Form.Item>
                            <Form.Item
                                name="address"
                                rules={[{ required: true, message: '请输入详细地址！' }]}
                            >
                                <Input placeholder="详细地址" className='vote-input' />
                            </Form.Item>
                            <Row>
                                <Row className='vote-form-note'>请务必填写准确收货信息，如果上述信息不实，导致无法邮寄奖品，后果自负。</Row>
                                    <div className='vote-beChecked'>
                                        {
                                            subSta ? <img src={buttonImg} alt="" onClick={() => onOk()} /> :
                                            <div className='sub-load'>loading</div>
                                        }
                                        
                                    </div>
                                {/* <div className='vote-form vote-form-sub' onClick={() => onOk()}>提交</div> */}
                            </Row>
                        </Form>
                        </div>
                    </div>
                </Modal>
            </div>
        </div>
    );
}

export default Vote